<script setup lang="ts">
import {verifyHttp, verifyUrl} from "@/utils/validate";

export interface IconProps {
  name?: string;
  size?: string;
}

const props = withDefaults(defineProps<IconProps>(), {
  name: '',
  size: "16px"
})
const type = computed(() => {
  if (props.name.includes("layui-")) {
    return 'font'
  } else if (verifyHttp(props.name)) {
    return 'img'
  } else if (props.name.includes("svg-")) {
    return 'svg'
  }
  return "";
})
const prefix = computed(() => {
  const strings = props.name.split("-");
  return strings[0] + "-icon"
})

const iconSize = computed(() => {
  return props.size && ({'font-size': props.size, width: props.size, height: props.size})
})
</script>

<template>
  <lay-icon v-if="type=='font'" :type="props.name" :prefix="prefix" class="icon" :size="size"></lay-icon>
  <img v-else-if="type=='img'" :src="props.name" alt="" class="icon" :style="iconSize"/>
  <svg v-else-if="type=='svg' " aria-hidden="true" class="icon" :style="iconSize">
    <use :xlink:href="`#${props.name}`"/>
  </svg>
</template>

<style scoped>
</style>
